<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>后台管理系统</title>
    <#--    <link rel="icon" href="favicon.ico" type="image/ico">-->
    <#--    <link href="../css/bootstrap.min.css" rel="stylesheet">-->
    <#-- 原本的bootstrap3.3.7不支持select tree -->
    <#--    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet">-->
    <#--    <link href="../css/materialdesignicons.min.css" rel="stylesheet">-->
    <#--    <link href="../css/material-design-iconic-font.min.css" rel="stylesheet">-->
    <#--    <link href="../css/animate.css" rel="stylesheet">-->
    <#--    <link href="../css/style.min.css" rel="stylesheet">-->

    <#--    <link href="../js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">-->
    <#--    <link href="../js/bootstrap-treeview/bootstrap-treeview.css" rel="stylesheet">-->
    <#include "../../resource.ftl"/>
    <link href="../js/bootstrap-iconpicker/material-icons.min.css" rel="stylesheet">
    <link href="../js/bootstrap-iconpicker/bootstrap-iconpicker.css" rel="stylesheet">

    <style type="text/css">
        .mdi:before, .mdi-set {
            display: inline-block;
            font: normal normal normal 24px/1 "Material Design Icons";
            font-size: 15px;
            text-rendering: auto;
            line-height: inherit;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }
    </style>
</head>

<body>
<div class="container-fluid p-t-15">

    <div class="row" style="font-size: 3px">

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h4>系统菜单管理</h4>
                </div>
                <div class="card-body">

                    <div id="toolbar2" class="toolbar-btn-action">
                        <div id="toolbar" class="toolbar-btn-action">
                            <div id="toolbar" class="toolbar-btn-action">
                                <button id="btn_add" type="button" class="btn btn-primary m-r-5" data-toggle="modal"
                                        data-target="#addObjModal">
                                    <span class="mdi mdi-plus" aria-hidden="true"></span>新增
                                </button>
                                <button id="btn_delete" type="button" class="btn btn-danger m-r-5">
                                    <span class="mdi mdi-window-close" aria-hidden="true"></span>批量删除
                                </button>
                                <button id="btn_expand_all" type="button" class="btn btn-secondary m-r-5">
                                    <span class="mdi mdi-folder-open" aria-hidden="true"></span>全部展开
                                </button>
                                <button id="btn_collapse_all" type="button" class="btn btn-secondary m-r-5">
                                    <span class="mdi mdi-folder" aria-hidden="true"></span>全部关闭
                                </button>
                            </div>
                        </div>
                    </div>

                    <table class="tree-table"></table>
                </div>
            </div>
        </div>

    </div>


    <!-- 新增 -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"
         id="addObjModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">新增菜单</h4>
                </div>
                <div class="modal-body">

                    <form id="addObjForm" method="post" class="site-form">
                        <div class="form-group">
                            <label for="type">菜单类型</label>
                            <select class="form-control" name="type">
                                <option value="">请选择菜单类型</option>
                                <option value="0">主菜单</option>
                                <option value="1">子菜单</option>
                                <option value="2">按钮</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="pid">父级菜单</label>
                            <input type="hidden" class="form-control" name="pid"/>
                            <input name="selectCatalog" type="text" autocomplete="off" class="form-control"
                                   onclick="$('#addTree').show()">
                            <div id="addTree" style="display:none;z-index:1000;background-color: white;"
                                 class="treeview form-control"></div>
                        </div>
                        <div class="form-group">
                            <label for="name">菜单名称</label>
                            <input type="text" class="form-control" name="name"
                                   placeholder="请输入菜单名称"/>
                        </div>
                        <div class="form-group">
                            <label for="icon">菜单图标</label>
                            <input type="text" class="form-control" name="icon"
                                   placeholder="请输入菜单图标"/>
                            <button class="btn btn-secondary form-control" data-iconset="materialdesign"
                                    data-icon="mdi mdi-emoticon-happy" role="iconpicker" data-search="true"
                                    data-search-text="查询..." data-rows="5" data-cols="10" data-align="center"></button>
                        </div>
                        <div class="form-group">
                            <label for="url">菜单URL</label>
                            <input type="text" class="form-control" name="url"
                                   placeholder="请输入菜单对应URL"/>
                        </div>
                        <div class="form-group">
                            <label for="permissions">权限标识</label>
                            <input type="text" class="form-control" name="permissions"
                                   placeholder="请输入菜单对应权限标识"/>
                        </div>
                        <div class="form-group">
                            <label for="sort">菜单排序</label>
                            <input type="text" class="form-control" name="sort"
                                   placeholder="请输入菜单排序"/>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary add-obj-btn">新增提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改 -->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel"
         id="updateObjModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">修改菜单</h4>
                </div>
                <div class="modal-body">
                    <form id="updateObjForm" method="post" class="site-form">
                        <div class="form-group">
                            <input type="hidden" class="form-control" name="id"/>
                        </div>
                        <div class="form-group">
                            <label for="type">菜单类型</label>
                            <select class="form-control" name="type">
                                <option value="">请选择菜单类型</option>
                                <option value="0">主菜单</option>
                                <option value="1">子菜单</option>
                                <option value="2">按钮</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="pid">父级菜单</label>
                            <input type="hidden" class="form-control" name="pid"/>
                            <input name="selectCatalog" type="text" autocomplete="off" class="form-control"
                                   onclick="$('#updateTree').show()">
                            <div id="updateTree" style="display:none;z-index:1000;background-color: white;"
                                 class="treeview form-control"></div>
                        </div>
                        <div class="form-group">
                            <label for="name">菜单名称</label>
                            <input type="text" class="form-control" name="name"
                                   placeholder="请输入菜单名称"/>
                        </div>
                        <div class="form-group">
                            <label for="icon">菜单图标</label>
                            <input type="text" class="form-control" name="icon"
                                   placeholder="请输入菜单图标"/>
                            <button class="btn btn-secondary form-control" data-iconset="materialdesign"
                                    data-icon="mdi mdi-emoticon-happy" role="iconpicker" data-search="true"
                                    data-search-text="查询..." data-rows="5" data-cols="10" data-align="center"></button>
                        </div>
                        <div class="form-group">
                            <label for="url">菜单URL</label>
                            <input type="text" class="form-control" name="url"
                                   placeholder="请输入菜单对应URL"/>
                        </div>
                        <div class="form-group">
                            <label for="permissions">权限标识</label>
                            <input type="text" class="form-control" name="permissions"
                                   placeholder="请输入菜单对应权限标识"/>
                        </div>
                        <div class="form-group">
                            <label for="sort">菜单排序</label>
                            <input type="text" class="form-control" name="sort"
                                   placeholder="请输入菜单排序"/>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary update-obj-btn">修改提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

</div>

<#--<script type="text/javascript" src="../js/jquery.min.js"></script>-->
<#--<script type="text/javascript" src="../js/bootstrap.min.js"></script>-->
<#--<script type="text/javascript" src="../js/perfect-scrollbar.min.js"></script>-->
<#--<script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.js"></script>-->
<#--<script type="text/javascript" src="../js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>-->
<#--<script type="text/javascript" src="../js/bootstrap-notify.min.js"></script>-->
<#--<script type="text/javascript" src="../plugins/layer/layer.js"></script>-->

<#--<script type="text/javascript" src="../js/bootstrap-treeview/bootstrap-treeview.min.js"></script>-->

<#--<script type="text/javascript" src="../plugins/ztree/jquery.ztree.all.min.js"></script>-->

<script type="text/javascript" src="../js/bootstrap-iconpicker/bootstrap-iconpicker.bundle.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-iconpicker/bootstrap-iconpicker.js"></script>
<script type="text/javascript" src="../js/bootstrap-iconpicker/bootstrap-iconpicker-iconset-all.js"></script>

<!--以下是tree-grid的使用示例-->
<link href="../js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js"></script>

<script type="text/javascript" src="/system/menu/js/list.js"></script>
</script>
</body>
</html>